<template>
	<div class="main-index" >
		<div class="main-pic-swip" :index="msg">
			<md-card>
				<md-card-media>
					      <!-- swiper -->
					<swiper :options="swiperOption">
					    <swiper-slide v-for="item in IndexBanner">
					    	<img :src="item"/>
					    </swiper-slide>

					     <div class="main-swiper-pagination" slot="pagination"></div>

					 </swiper>
				 </md-card-media>
			</md-card>

		</div>
		<div class="nav-bot">
			<span @click="openClass"><img  src="../assets/talk1.png" />课程咨询</span>
			<span @click="openJob"><img src="../assets/talk.png"/>就业咨询</span>
		</div>

		<div class="show-pic"  v-bind:class="{show:isShow}">
			<img @click="closePic" ref="showpic" src="../assets/pict.gif" />
		</div>

		<div class="main-details">
			<div class="main-sevice">

				<p class="main-sevice-header">服务体系</p>
				<div v-for="item in IndexServ">
					<img :src="item"/>
				</div>

			</div>
			<div class="main-job-list">
				<div class="main-job-item">
					<p class="main-index-header">就业套餐</p>
					<div v-for = " item in IndexJob">
						<img :src="item"/>
						<!--<button class="main-index-item-btn"  @click="LessonDetail(item[1])">查看课程详情</button>-->
					</div>

				</div>
			</div>
			<div class="main-act-item">
				<div class="main-act-text">
					<p class="main-index-header">实战项目</p>
					<div v-for = "item in IndexItem">
						<img :src="item"/>

					</div>
<!--
					<p class="main-index-header">
						<button class="main-index-item-btn" @click="ProjectDetail">查看更多详情>></button>
					</p>-->
				</div>
			</div>
			<div class="main-more-sev">
				<div class="main-more-text">
					<p class="main-index-header">更多专属服务</p>
					<div v-for="item in IndexMore">
						<img :src="item[0]"/>
						<p class="main-more-p"><span>{{item[1]}}</span></p>
					</div>


				</div>
			</div>
			<div class="main-good-talent">
				<div class="main-good-text">
					<p class="main-good-header">
						<span>为什么选择比特科技</span>
						<br/><br/><span class="main-index-header-span2">我们的优势</span>
					</p>
					<div v-for="item in IndexGood">
						<img :src="item"/>
					</div>

				</div>
			</div>
			<div class="main-cover-school">
				<div class="main-cover-text">
					<p class="main-index-header">覆盖校区</p>
					<div v-for="item in IndexSchool">
						<img  :src="item[0]"/>
						<p class="main-more-p">
							<span>{{item[1]}}</span>
							<!-- <a>点击查看校区>></a> -->
							<a href="https://j.map.baidu.com/TySeO" target="_blank">点击查看校区>></a>
						</p>
					</div>

					<p class="main-index-header">
						<button class="main-index-item-btn" @click="Test">点击查看校区分布>></button>
					</p>
				</div>
			</div>
			<div class="main-teacher-looks">
				<p class="main-index-header">导师阵容</p>
				<p class="main-teacher-text">{{IndexT}}</p>
				<div>
					<button class="main-index-item-btn" @click="Teach">导师详情介绍</button>
				</div>
			</div>
			<div class="main-bit-talk">
				<div class="main-bit-text">
					<p class="main-index-header">
						<span style="color: white;">比特人说比特</span>
					</p>
					<!--<div class="main-prev">
						<img v-on:click="pre($event)" src="../assets/左箭头.png" />
					</div>-->
					<md-card>
						<md-card-media>
					      <!-- swiper -->
					      <swiper :options="swiperOption2">
					        <swiper-slide v-for="item in IndexBt">

							    	<img :src="item[0]" />
							    	<p class="main-tea-name">{{item[1]}}</p>
							    	<p class="main-tea-job1">{{item[2]}}</p>
							    	<p class="main-tea-intru">
							    		{{item[3]}}
							    	</p>
							    	<span class="bar"></span>
					        </swiper-slide>

					       <div class="swiper-pagination" slot="pagination"></div>

					      </swiper>
					    </md-card-media>
					</md-card>


				   <!-- <div  class="main-next">
				    	<img v-on:click="next($event)" src="../assets/右箭头.png" />
				    </div>-->
				</div>
			</div>
			<div class="main-question ">
				<div class="main-ques-text">
					<p class="main-index-header">
						<span>咨询问答</span>
					</p>
				<md-card>
					<md-card-media>
						      <!-- swiper -->
						<swiper :options="swiperOption2">
						    <swiper-slide v-for="item in IndexQues">
						    	<p class="main-question-q">
						    		{{item[0]}}
						    	</p>
						    	<p class="main-question-a">
						    		{{item[1]}}
						    	</p>
						    	<span class="bar2"></span>
						    </swiper-slide><br/>

						     <div class="swiper-pagination" slot="pagination"></div>

						 </swiper>
					 </md-card-media>
				</md-card>

				</div>
			</div>

		</div>
	</div>
</template>
<script>

import {swiper,swiperSide} from 'vue-awesome-swiper'
	export default{
		name:'Index',
	   mounted(){
  		this.swipSmm();
    	},
		data(){
			return {
				swiperOption:{
					 pagination:'.swiper-pagination',
					 autoplay:true

					},
				swiperOption2:{
					loop:true,
					 pagination:{
					 	el:'.swiper-pagination',
					 	clickable:true,
					 	},
					 autoplay:true,
					  slidesPerGroup: 2,
					 slidesPerView: 2
					},
				 msg:'111',
				 IndexBanner:[],
				 IndexT:'',
				 IndexBt:[],
				 IndexQues:[],
				 IndexServ:[],
				 IndexJob:[],
				 IndexItem:[],
				 IndexMore:[],
				 IndexGood:[],
				 IndexSchool:[],
				 page:1,
				 isShow:false
				}
			},
		components:{
				swiper,
				swiperSide
			},
		methods:{
			    openClass(){
			    	this.isShow = true;
			    	this.$refs.showpic.src = require("../assets/bg2.png")
			    },
			    openJob(){
			    	this.isShow = true;
			    	this.$refs.showpic.src = require("../assets/pict.gif")
			    },
			    closePic(){
			    	this.isShow = false;
			    },
			  Question(){
					this.$router.push({path:'/btreabox'});
				},
			  ProjectDetail(){
					this.$router.push({path:'/goodlesson'});
				},
				MoreServer(){
					this.$router.push({path:'/goodlesson'});
				},
				Teach(){
					this.$router.push({path:'/teacher'});
				},
				Test(){
					this.$router.push({path:'/login'});
				},
			  LessonDetail(index){
					if(index == 1){
						this.$router.push({path:'/cstudy'});
					}else if (index == 2) {
						this.$router.push({path:'/javastudy'});
					}else{
						this.$router.push({path:'/test'});
					}
				},
	    	swipSmm(){

	    		let self = this;
	    		this.msg = '22';
	    		this.$http({
					method:'get',
					url:'/Phonemain/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					}
				}).then((response)=>{
					self.IndexSchool =response.data[5];
					self.IndexGood =response.data[4];
					self.IndexItem = response.data[2];
					self.IndexMore = response.data[3];
					self.IndexJob =response.data[1];
					self.IndexServ = [require("../assets/Server1.png"),require("../assets/Server2.png"),require("../assets/Server3.png")];
					self.IndexQues = response.data[8];
					self.IndexBanner = response.data[0];
					self.IndexT =  response.data[6];
					self.IndexBt = response.data[7];
				})

	    	},
	    	bginput(event){

	    		event.target.lastElementChild.style.display='block';
	    	},
	    	bgoutput(event){

	    		event.target.lastElementChild.style.display='none';
	    	},

   		 }

	}

</script>

<style>

	button:focus{
		outline: none;
	}
	.show-pic{
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		top: 510px;
		display: none;
		z-index: 10;
	}
	.show{
		display: block!important;
	}
	.show-pic img{
		width: 70%;
		position: relative;
		top: 10px;
		margin-left: 15%;
	}
	.main-act-item{
		height: 242px;
		background: #F3F3F3;
	}
	.main-job-list{
		height: 200px;
	}
	.main-more-sev{
		height: 350px;
	}
	.main-more-text{
		height: 330px;
		overflow: hidden;
	}
	.bar2{
		display: inline-block;
		position: absolute;
		top: 10px;
		right: 0;
		width: 6px ;
		height: 220px;
		background: #f3f3f3;
	}
	.main-ques-text .swiper-slide{
		width: 50%!important;
		height: 280px;
		text-align: left;
	}
	.main-ques-text .swiper-pagination{
		background:#f3f3f3!important ;
	}
	.bar{
		display: inline-block;
		position: absolute;
		top: 0px;
		right: 0;
		width: 6px ;
		height: 270px;
		background: -moz-linear-gradient(left,#00b5ff,#02d8ff);
		background: -webkit-linear-gradient(left,#00b5ff,#02d8ff);

	}
	.swiper-container-horizontal > .swiper-pagination-bullets{
		bottom: 0;
	}

	.main-index-header{
		height: 40px;
		line-height: 40px;
	}
	.main-index{
		position: relative;
		top: 80px;
	}
	.nav-bot img{
		width: 30px;
		vertical-align: middle;
		margin-right: 10px;
	}
	.nav-bot span{
		text-align: center;
		display: inline-block;
		float: left;
		width: 50%;
		margin: 0;
		background: white;
		height: 40px;
		font-size: 12px;
		line-height: 40px;
	}
	.main-job-list,.main-act-item,.main-more-sev,.main-good-talent,.main-cover-school,.main-teacher-looks,.main-bit-talk {
		text-align: center;
	}
	.main-ques-text,.main-job-item,.main-act-text,.main-more-text,.main-good-text,.main-cover-text,.main-bit-text{
		width: 80%;
		text-align: center;
		display: inline-block;
	}
	.main-sevice-header{
		margin: 0;
		padding-top: 50px;
		padding-bottom: 10px;
	}
	.main-question{
		background: #f3f3f3;
		text-align: center;
		height: 380px;
	}
	.main-ques-text{

		display: inline-block;
	}
	.main-tea-intru{
		font-size: 12px;
		padding-left: 10px;
		padding-right: 10px;
		color: #898989;
		text-align: left;
	}
	.main-question-q{
		margin-top: 10px!important;
	}
	.main-question-q,.main-question-a{
		font-size: 12px;
		background: white;
		margin: 0;
		padding-bottom:20px ;
		padding: 5px;
		height: 100px;
	}
	.main-tea-job1{
		font-size: 12px;
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
		color: #666666;
	}
	.main-tea-name{
		font-size: 18px;
		font-weight: 600;
	}
	.main-bit-text  .swiper-side{
		width: 50%;
		height: 260px;

		overflow: hidden;
	}

	.main-bit-text .swiper-pagination-bullet-active{
		background: rgba(225,225,225)!important;
	}

	.main-bit-text .swiper-pagination,.main-question .swiper-pagination{
		line-height: 60px;
		height: 60px;
		background: -moz-linear-gradient(left,#00b5ff,#02d8ff);
		background: -webkit-linear-gradient(left,#00b5ff,#02d8ff);
	}
	.main-bit-text .swiper-container{
		background: -moz-linear-gradient(left,#00b5ff,#02d8ff);
		background: -webkit-linear-gradient(left,#00b5ff,#02d8ff);
		width: 100%;
		height: 327px;
		display: inline-block;
		box-sizing: border-box;
		position: relative;
		background: white;
		overflow: hidden;
		margin-bottom: 10px;
	}
	.main-bit-text img{
		width: 60%;
		border-radius: 50% 50%;
	}
	.main-teacher-looks{
		background: #f3f3f3;
		padding-top: 10px;
		padding-bottom: 20px;
	}
	.main-teacher-text{
		padding: 0 20px;
		color: #373737;
		font-size: 13px;
		margin: 19px;
	}
	.main-index-item-btn{
		background: #ff9e0b;
		border: none;
		color: white;
		height: 26px;
		font-size: 12px;
		border-radius: 15px 15px;
	}
	.main-cover-text div{
		width: 50%;
		height: 123px;
		display: inline-block;
		box-sizing: border-box;
		border-right: 5px solid white;
		position: relative;
	}
	.main-more-p a{
		text-decoration: none;
		color: white;
		display: inline-block;
		position: relative;
		top: 60px;
	}
	.main-cover-text img{
		width: 100%;
		height: 100%;
	}
	.main-good-header{
		color: white;
	}
	.main-more-p{
		margin: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		background: rgba(0,0,0,0.5);
		color: white;
		top: 0;
		font-size: 12px;

	}
	.main-more-p span{
		position: relative;
		top: 50px;
		display: inline-block;
		width: 80%;

	}

	.main-good-talent,.main-bit-talk {
		background: -moz-linear-gradient(left,#00b5ff,#02d8ff);
		background: -webkit-linear-gradient(left,#00b5ff,#02d8ff);
	}
	.main-good-text div{
		width: 100%;
		height: 220px;
		margin-bottom: 10px;
	}
	.main-good-text img{
		width: 100%;
		height: 100%;

	}

	.main-more-text div{
		width: 50%;
		display: inline-block;
		height: 125px;
		box-sizing: border-box;
		border-right: 5px solid white;
		position: relative;
	}
	.main-more-text img{
		width: 100%;
		height: 100%;
	}
	.main-act-text div{
		display: inline-block;
		width: 25%;
		height: 100px;
		box-sizing: border-box;
		border-right: 5px solid white;
	}
	.main-act-text img{
		width: 100%;

	}
	.main-job-item div{
		display: inline-block;
		width: 33%;

		box-sizing: border-box;
		border-right: 5px solid white;
	}
	.main-job-list img{
		width: 100%;

	}
	.main-sevice img{
		width: 80%;

	}
	.main-sevice{
		text-align: center;
		background: #f3f3f3;
	}
	.main-pic-swip{
		width: 100%;
		height: 470px;
		position: relative;
		top:0px;
	}
	.main-index-tip{
		font-size: 25px!important;
		margin-top: 10px!important;
		margin-bottom: 40px!important;
	}
	.main-pic-swip img{
		width:100%;
		height: 470px;
	}

</style>
